<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="../build/react.js"></script>
    <script  src="../build/react-dom.js"></script>
    <script  src="../build/browser.min.js"></script>
</head>
<body>
<div  id="div1"></div>
<script type="text/babel">
    var BasicInput=React.createClass({
        getInitialState: function() {
            return {
                inputCheck:false,
            }
        },
        handleBlur:function (event) {
            if(event.target.value==""||event.target.value==null){
                this.setState({inputCheck:true});
            }else{
                this.setState({inputCheck:false});
            }
        },
        render(){
            return (
                    <div>
                        <input placeholder={this.props.plh}  value={this.props.iptValue}  type={this.props.iptType} onFocus={this.props.handleFocus}   onChange ={this.props.handleChange} onBlur={this.handleBlur}  name={this.props.iptName}  />{this.props.desc}<br/>
                        {
                            this.state.inputCheck?
                                    <div>{this.props.logonCheck}</div> :<div style={{display:"none"}}>{this.props.logonCheck}</div>
                        }
                    </div>
            )
        }
    });

    var Logonqq=React.createClass({
        getDefaultProps: function() {
            return {
                title: 'QQ登录'
            }
        },
        getInitialState: function() {
            return {
                accName: '',
                pwd:'',
                tips:false,
            }
            },
        handleFocus: function(event){
            let iptName = event.target.name;
            if (iptName == "accName") {
                this.setState({accName: ''});
            }else if(iptName == "pwd"){
                this.setState({pwd: ''});
            }
        },

        handleChange:function(event) {
            console.log(124);
            let iptName = event.target.name;
            if (iptName == "accName") {
                this.setState({accName: event.target.value});
            }else if(iptName == "pwd"){
                this.setState({pwd: event.target.value});
            }
        },

        validateLogon:function () {
            var userName = this.state.accName;
            console.log(userName);
            var pwd = this.state.pwd;
            if (!(userName == "" || userName == null)) {
                if (userName !== "839470083") {
                    this.setState({tips: true});
                } else {
                    this.setState({tips: false});
                }
            }
        },

            render: function(){
                return (
                        <div>
                             <h1>{this.props.title}</h1>
                           <BasicInput  iptType="text" iptValue={this.state.accName}   plh="QQ账号"  iptName="accName" handleFocus={this.handleFocus} handleChange={this.handleChange}   desc="注册账号"  logonCheck="请您输入账号后再登录"   />
                            <BasicInput  iptType="text"  iptValue={this.state.pwd}     plh="密码"  iptName="pwd" handleFocus={this.handleFocus}  handleChange={this.handleChange}    desc="找回密码"  logonCheck="请您输入密码后再登录"   />
                            <input  type="button" onClick={this.validateLogon} value="登录" />
                            {
                                this.state.tips ?
                                    <div>您输入的账号不存在，请重新确认后输入</div> :<div style={{display:"none"}}>您输入的账号不存在，请重新确认后输入</div>
                            }

                        </div>
                )
            }
        }
    );
    ReactDOM.render(<Logonqq />, document.getElementById("div1"));
</script>
</body>
</html>